<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>

          <el-breadcrumb-item>口碑列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <!-- 此处放入一个表格 -->
        <el-table :data="tableData" style="width: 100%" :border="true">
          <el-table-column
            prop="id"
            label="Id"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="phone" label="手机" align="center">
          </el-table-column>
          <el-table-column prop="inputtime" label="报备时间" align="center">
            <!-- 自定义模板 slot-scope 作用范围取自当前列的属性 -->
            <template slot-scope="scope">
              {{ scope.row.inputtime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="source" label="来源" align="center">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.source === '网络'"
                type="success"
                effect="dark"
                >{{ scope.row.source }}
              </el-tag>
              <el-tag
                v-if="scope.row.source === '朋友'"
                type="primary"
                effect="dark"
                >{{ scope.row.source }}
              </el-tag>
              <el-tag
                v-if="scope.row.source === '学生'"
                type="danger"
                effect="dark"
                >{{ scope.row.source }}
              </el-tag>
              <el-tag
                v-if="scope.row.source === '校招'"
                type="warning"
                effect="dark"
                >{{ scope.row.source }}
              </el-tag>
              <el-tag
                v-if="scope.row.source === '宠物'"
                type="danger"
                effect="dark"
                >{{ scope.row.source }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="备注" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <el-button type="primary" icon="el-icon-edit" size="mini"
              >编辑</el-button
            >
            <el-button type="danger" icon="el-icon-delete" size="mini"
              >删除</el-button
            >
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <div class="pageinfo">
      <!-- 
background:带背景色
layout:(显示的内容，total: 显示总记录数，sizes: 控制每页记录数prev:显示上一顶next:显示下一页jumper :显示跳转页面paper:页码导航条)
page-sizes :控制每页记录数的数组
page-size:当前每页记录数
total:总记录数
current-page当前页
事件
size-change当前每页显示记录数发生改变后触发的事件
 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.curr"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入口碑接口
import request from "@/api/koubei.js";
export default {
  created() {
    // 页面第一次加载口碑数据 (参数params(curr=1 limit=5))
    this.loadkbInfo();
  },
  data() {
    return {
      params: {
        curr: 1,
        limit: 5,
      },
      // 总记录数
      totalcount: 0,
      // 表格数据的集合
      tableData: [],
    };
  },
  methods: {
    //页面刷新口碑信息 根据当前页和每页记录数
    async loadkbInfo() {
      let res = await request.getkblist(this.params);
      console.log(res.data.list);
      this.tableData = res.data.list;
      this.totalcount = res.data.total;
    },
    // 每页记录数发生改变的时候触发的事件
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // console.log("11");
      this.params.limit = val;
      this.loadkbInfo(this.params);
    },

    // 当前页发生改变的时候触发的事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.curr = val;
      // 调用刷新口碑的方法
      this.loadkbInfo(this.params);
    },
  },
};
</script>
<style>
.pageinfo {
  width: 100%;
  text-align: center;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: tomato;
}
</style>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>